<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    active-text-color="#9a0e14"
    text-color="#000"
    background-color="#eee"
  >
    <el-menu-item v-for="(clubType, index) in clubTypeList" :key="index">
      <template #title>
        <router-link
          :to="{ name: 'ClubList', query: { typeId: clubType.id } }"
          >{{ clubType.type }}</router-link
        >
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const OK = 200;
const clubTypeList = ref([]);

const getClubTypeList = async () => {
  try {
    const res = await axios.get("/api/clubTypes");
    if (res.data.code === OK) {
      clubTypeList.value = res.data.data;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取社团类型列表失败:", error);
  }
};

onMounted(() => {
  getClubTypeList();
});
</script>

<style scoped>
.router-link-exact-active.router-link-active {
  display: block;
  font-size: 120%;
  font-weight: 900;
  color: #9a0e14;
}
</style>
